<template>
    <div class="monitorC">
        <div class="monitorC_title">
            <span>监控面板</span>
        </div>
        <!--        <video id="my-video" class="video-js vjs-default-skin videoContainer videoStyle" controls autoPlay preload="auto">
                    &lt;!&ndash; <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"/> &ndash;&gt;
                </video>-->
        <div id="ws-real-player" class="ws-real-player" muted="muted"></div>
        <div class="monitorC_close" @click="closeNews"></div>
    </div>
</template>


<script>
import {getDevicePlayUrl} from "@/api/area";
import videojs from "video.js";
import "videojs-contrib-hls";
import PlayerManager from "./icc/PlayerManager";


export default {
    name: "monitor",
    props: {
        monitorData: Object,
        playMonotorId: String,
    },
    data() {
        return {
            myPlayer: null,
            playerOptions: {
                controls: true,
                playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
                autoplay: true, // 如果为true,浏览器准备好时开始回放。
                muted: true, // 默认情况下将会消除任何音频。
                loop: false, // 是否视频一结束就重新开始。
                techOrder: ["html5"],
                preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: "zh-CN",
                aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [
                    // {
                    //   type: "application/x-mpegURL", // 类型
                    //   src: "http://videocdn.renrenjiang.cn/Act-ss-m3u8-sd/1037359_1546064640169/1037359_1546064640169.m3u8", // url地址
                    // },
                ],
                poster: "", // 封面地址
                notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true, // 当前时间和持续时间的分隔符
                    durationDisplay: true, // 显示持续时间
                    remainingTimeDisplay: true, // 是否显示剩余时间功能
                    fullscreenToggle: true, // 是否显示全屏按钮
                },
            },
            player: {}
        }
    },
    // 221.10.42.77
    // 192.168.2.30
    watch: {
        // 'monitorData': function (newV, oldV) {
        //   // this.playVideo()
        //   // this.$forceUpdate()
        // },
        "playMonotorId": function (newV) {
            if (newV) {
                console.log('getVideo', '========watch')
                this.getVideoDom()
            }
        }
    },
    mounted() {
        console.log('getVideo', '========mounted')
        this.getVideoDom();
        console.log(this.playMonotorId, "id")
        console.log(this.monitorData, "摄像头")
    },
    beforeDestroy() {
        this.closeVideo()
    },
    methods: {
        getVideoDom() {
            let dom = document.getElementById(`ws-real-player`);
            if (dom) {
                this.getVideo();
            } else {
                setTimeout(() => {
                    clearTimeout()
                    this.getVideoDom()
                }, 200)
            }

        },
        async getVideo() {
            const res = await getDevicePlayUrl({
                id: this.playMonotorId,
                streamType: 1
            })
            console.log('getVideo', this.playMonotorId);

            if (res?.data?.data) {
                this.playerOptions.sources = (res.data.data || []).map(item => ({
                    type: "application/x-mpegURL",
                    src: "http://172.22.12.15:7086/live/cameraid/1000048%247/substream/1.m3u8"
                }));
                // if (!this.playerOptions.sources.length) {
                //   this.playerOptions.sources = [
                //     {
                //       // type: "application/x-mpegURL", // 类型
                //       src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4", // url地址
                //       // src: "http://172.22.12.15:7086/live/cameraid/1000006%2430/substream/1.m3u8", // url地址
                //     }
                //   ];
                // }
                // this.myPlayer = videojs("my-video", this.playerOptions);
                // this.myPlayer.play()
                /*   if(window.initPlay){
                       this.myPlayer.playRealVideo({
                           channelList: [{
                               id: String(id), /!** 在线的通道id **!/
                               isOnline: true, /!** 设备是否在线，非在线无法播放 **!/
                           }],
                           streamType: "1",
                       })
                       return
                   }*/
                this.myPlayer = new PlayerManager({
                    el: "ws-real-player", // 实时预览容器id
                    // pztEl: "ws-pan-tilt", // 云台控制容器id
                    type: 'real', // real - 实时预览
                    maxNum: 1, // 最多显示的窗口
                    num: 1, // 初始化显示的窗口
                    showControl: true, // 默认是否显示工具栏
                    // serverIp: "http://172.22.12.11:22203/", // 代理IP
                    streamServerIp: "172.22.12.15", // 流媒体服务 Ip 地址 【如果拉流端口发生改变时，需拼接端口 】
                    // proxyServerIp: "http://localhost:85/", // 代理服务器 Ip 地址 【直连模式不传】
                    useNginxProxy: false, // 拉流模式 【true-代理模式拉流，false-直连拉流】
                    // receiveMessageFromWSPlayer, // 接收来自wsplayer的回调
                    /* 下面为播放器返回的回调函数，可以在下面监听各种回调事件 */
                    receiveMessageFromWSPlayer: (methods, data) => {
                        console.log(this.playMonotorId, methods, 'id值')
                        switch (methods) {
                            case 'initializationCompleted':
                                // 初始化完成，可调用播放方法（适用于动态加载解码库）
                                // 若回调未触发时就使用实时预览/录像回放，则无法播放。
                                // 此时我们可以调用一个
                                // console.log("初始化播放器成功");
                                window.initPlay = true;
                                console.log('66666', this.myPlayer)
                                this.myPlayer.playRealVideo({
                                    channelList: [{
                                        id: String(this.playMonotorId), /** 在线的通道id **/
                                        isOnline: true, /** 设备是否在线，非在线无法播放 **/
                                    }],
                                    streamType: "1",
                                })
                                break;
                            case "realSuccess": // 实时预览成功
                                console.log("实时预览成功")
                                break;
                            case "realError": // 实时预览失败
                                console.log("实时预览失败")
                                break;
                            case "talkError": // 对讲失败
                                console.log("对讲失败");
                                break;
                            case 'selectWindowChanged': // 选中的窗口发生改变
                                console.log(data, "返回窗口信息")
                                break;
                            case 'windowNumChanged': // 播放器显示的路数发生改变
                                console.log(data, "返回显示的窗口数量")
                                break;
                            case 'closeVideo': // 视频关闭回调
                                // 点击关闭按钮引发的视频关闭进行提示
                                // 切换视频引发的视频关闭不进行提示
                                if (!data.changeVideoFlag) {
                                    console.log(`窗口${data.selectIndex}的视频已关闭`)
                                }
                                break;
                            case 'statusChanged': // 视频状态发生改变
                                if (!this.start) {
                                    setTimeout(() => {
                                        clearTimeout()
                                        this.myPlayer.playRealVideo({
                                            channelList: [{
                                                id: String(this.playMonotorId), /** 在线的通道id **/
                                                isOnline: true, /** 设备是否在线，非在线无法播放 **/
                                            }],
                                            streamType: "1",
                                        })
                                        this.start = true
                                    }, 100)
                                    window.initPlay = true;
                                }


                                break;
                            case 'errorInfo': // 错误信息汇总
                                console.log(data, "可打印查看错误消息");
                        }
                    }
                })
                console.log(this.myPlayer, 'this.myPlayer')
            }

        },
        closeNews() {
            this.$emit('showMonitor', false, '')
        },
        closeVideo() {
            // this.myPlayer.player.setPlayerNum(1, false)
            this.myPlayer.player.close()
        }
        // playVideo(mediaUrl) {
        //   console.log("aaaa", "播放" + mediaUrl)
        //   this.$refs.videoPlayer.player.src(mediaUrl)
        //   this.$refs.videoPlayer.player.play()
        //   console.log("aaaa", this.playerOptions)
        // },
    }

}
</script>
<style lang="less" scoped>
.ws-real-player{
    margin: 0 auto;
    width: 95%;
    height: 87%;
}
.monitorC {
  position: relative;
  width: 662px;
  height: 490px;
  display: flex;
  overflow: hidden;
  background-size: 100% 100%;
  background-image: url("@/assets/news/bg_news.png");
  flex-direction: column;


  &_title {
    margin-left: 22px;
    width: 216px;
    height: 24px;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_title1.png");

    span {
      height: 24px;
      font-size: 13px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #FFFFFF;
      margin-left: 11px;
      line-height: 24px;
      background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  &_close {
    position: absolute;
    right: 20px;
    cursor: pointer;
    top: 30px;
    width: 23px;
    height: 22px;
    background-size: 100% 100%;
    background-image: url("@/assets/news/icon_closenews.png");
  }

  .videoStyle {
    position: absolute;
    margin-top: 20px;
    width: 560px;
    height: 260px;
    margin-top: 60px;
    margin-left: 50px;
    max-height: 300px;
  }
}
</style>